<template>
  <div>
    <el-row class="fullScreen">
      <el-col class="bg-green" :span="4">
        <draggable element="ul" class="left-list" v-model="lists"
                   @start="isDragging=true" @end="isDragging=false"
                   :move="onMove" :options="dragOptions">
          <li class="left-list-item" v-for="(item, index) in lists" :key="index">{{item.name}}</li>
        </draggable>
      </el-col>
      <el-col :span="16" class="bg-gray">
        <div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-picture-outline" @click="setPreview(false)">预览</el-button>
            <el-button type="primary" @click="setPreview(true)"><i class="el-icon-arrow-left "></i><i class="el-icon-arrow-right "></i>代码</el-button>
          </el-button-group>
        </div>
        <draggable v-show="!isCode" element="ul" v-model="targetLists" class="right-list" :options="dragOptions2" :move="onMove">
          <li v-for="(item, index) in targetLists" :key="index">
            <div v-html="item.elem"></div>
          </li>
        </draggable>
        <div v-show="isCode">
          <div v-for="(item, index) in targetLists" :key="index">
            {{item.uiCode}}
          </div>
          <div ref="editor" style="height: 400px"></div>
        </div>
      </el-col>
      <el-col :span="4" class="bg-yellow">
        <el-row>
          <el-col :span="24">lala</el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import * as monaco from 'monaco-editor'

export default {
  name: 'home',
  monaco,
  components: {
    draggable
  },
  data () {
    return {
      lists: [{ 'code': 'layout', 'name': '布局' }, {
        'code': 'input',
        'name': '文本框',
        'elem': '<input class="el-input__inner" />',
        'uiCode': '<el-input />'
      },
      {
        'code': 'Button',
        'name': '按钮',
        'elem': '<button class="el-button el-button--primary">Button</button>',
        'uiCode': '<el-button>Button</el-button>'
      }, {
        'code': 'select',
        'name': '下拉框',
        'elem': `
                  <div class="el-select">
                      <div class="el-input el-input--suffix">
                        <input type="text" readonly="readonly" autocomplete="off" placeholder="请选择"
                            class="el-input__inner" />
                        <span class="el-input__suffix">
                            <span class="el-input__suffix-inner">
                                <i class="el-select__caret el-input__icon el-icon-arrow-up">
                                </i>
                            </span>
                        </span>
                      </div>
                      <div class="el-select-dropdown el-popover" style="display: none; min-width: 217px;">
                          <div class="el-scrollbar" style="display: none">
                              <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                  style="margin-bottom: -17px; margin-right: -17px;">
                                  <ul class="el-scrollbar__view el-select-dropdown__list"></ul>
                              </div>
                              <div class="el-scrollbar__bar is-horizontal">
                                  <div class="el-scrollbar__thumb" style="transform: translateX(0%)"></div>
                              </div>
                              <div class="el-scrollbar__bar is-vertical">
                                  <div class="el-scrollbar__thumb" style="transform: translateY(0%);">
                                  </div>
                              </div>
                          </div>
                          <p class="el-select-dropdown__empty">无数据</p>
                      </div>
                  </div>`,
        'uiCode': '<el-select />'
      },
      {
        'code': 'radio',
        'name': '单选框',
        'elem': `<label role="radio" tabindex="0" class="el-radio is-checked"><span class="el-radio__input is-checked"><span class="el-radio__inner"></span><input type="radio"  tabindex="-1" class="el-radio__original" value=""></span><span class="el-radio__label"></span></label>`,
        'uiCode': '<el-radio />'
      },
      {
        'code': 'checkbox',
        'name': '复选框',
        'elem': `<label role="checkbox" class="el-checkbox"><span  class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" class="el-checkbox__original" value=""></span></label>`,
        'uiCode': '<el-checkbox />'
      }],
      currentCtrl: '',
      targetLists: [],
      editable: true,
      isDragging: false,
      delayedDragging: false,
      isCode: false,
      editor: ''
    }
  },
  methods: {
    setPreview (state) {
      this.isCode = state
    },
    onMove ({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      )
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 0,
        group: {
          name: 'ctrl',
          pull: 'clone',
          put: false
        },
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    },
    dragOptions2 () {
      return {
        animation: 0,
        group: {
          name: 'ctrl'
        },
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    }
  },
  mounted () {
    this.editor = monaco.editor.create(this.$refs.editor, {
      value: '',
      language: 'plaintext',
      theme: 'vs-dark'
    })
  },
  watch: {
    isDragging (newVal) {
      if (newVal) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    },
    targetLists (newVal) {
      let finalVal = ''
      for (let i = 0; i < newVal.length; i++) {
        finalVal += newVal[i].uiCode + '\n'
      }
      console.log(finalVal)
      this.editor.setValue(finalVal)
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  ul > li {
    padding: 10px;
    list-style: none;
  }

  .fullScreen {
    height: 98vh;
  }

  .bg-green {
    background: lightgreen;
    height: 100%;
    ul>li{
      border-bottom: 1px solid #ddd;
      &:hover {
        color: #fff;
        background: green;
      }
    }
  }

  .bg-gray {
    background: #f2f2f2;
    height: 100%;
  }

  .bg-yellow {
    background: lightyellow;
    height: 100%;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .left-list-item {
    cursor: move;
  }

  .right-list {
    min-height: 50px;
  }
</style>
